<template>
    <div class="slotFooter" :class="{ ios: isIOS, ipx: isIPX }" :style="{ backgroundColor: bgColor }">
        <div class="slotFooter--view l-flex l-flex__c">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'slotFooter',
    props: {
        bgColor: {
            type: String,
            default: 'white'
        }
    },
    data() {
        return {
            isIOS: false,
            isIPX: false
        };
    },
    beforeMount() {
        if (window.isClient && !window.isAndroid) {
            this.isIOS = window.isIOS;
            this.isIPX = window.isIPX;
        }
    }
};
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';

.slotFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $footerHeight;
    z-index: 2;

    &.ipx {
        height: calc(#{$footerHeight} + #{$iPXBottomBar});
    }

    &--view {
        height: $footerHeight;
    }
}
</style>
